<template>
  <div class="wrapper">
    <a-page-header
      style="padding: 12px;border-bottom: 1px solid rgb(235, 237, 240)"
      title="申报项目"
      @back="() => $router.go(-1)"
    />
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form v-bind="formLayout">
          <a-row :gutter="[48,0]">
            <a-col :sm="24">
              <a-form-item
                label="组织类别"
                style="margin-bottom: 0px">
                <a-radio-group v-model="queryParam.socialOrganizationTypeId" button-style="solid" @change="getList(true)">
                  <a-radio-button :value="-1">
                    全部
                  </a-radio-button>
                  <a-radio-button v-for="item in types" :key="item.id" :value="item.id" style="margin-bottom:10px">
                    {{ item.type }}
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48,0]">
            <a-col :sm="24">
              <a-form-item
                label="申请级别"
                style="margin-bottom: 10px">
                <a-radio-group v-model="queryParam.declarationLevelId" button-style="solid" @change="getList(true)">
                  <a-radio-button :value="-1">
                    全部
                  </a-radio-button>
                  <a-radio-button v-for="item in levels" :key="item.id" :value="item.id">
                    {{ item.level }}
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48,0]" v-if="role.roleKey === 'admin'">
            <a-col :sm="24">
              <a-form-item
                label="审核状态"
                style="margin-bottom: 10px">
                <a-radio-group v-model="queryParam.status" button-style="solid" @change="getList(true)">
                  <a-radio-button :value="-1">
                    全部
                  </a-radio-button>
                  <a-radio-button :value="1">
                    审核中
                  </a-radio-button>
                  <a-radio-button :value="2">
                    审核不通过
                  </a-radio-button>
                  <a-radio-button :value="3">
                    审核通过
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48,0]" v-if="role.roleKey === 'admin' || role.roleKey === 'GUIDANCE_EXPERT'">
            <a-col :sm="24">
              <a-form-item
                label="进度状况"
                style="margin-bottom: 10px">
                <a-radio-group v-model="queryParam.rate" button-style="solid" @change="getList(true)">
                  <a-radio-button :value="-1">
                    全部
                  </a-radio-button>
                  <a-radio-button :value="0">
                    未填报
                  </a-radio-button>
                  <a-radio-button :value="1">
                    填报中
                  </a-radio-button>
                </a-radio-group>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48,0]">
            <a-col :sm="24">
              <a-form-item
                label="关键字"
                style="margin-bottom: 10px"
              >
                <a-row :gutter="[48,0]">
                  <a-col :sm="12">
                    <a-input v-model="queryParam.keyword" placeholder="请输入名称" @keyup.enter.native="getList(true)"/>
                  </a-col>
                  <a-col :sm="12">
                    <a-button type="primary" @click="getList(true)">查询</a-button>
                    <a-button style="margin-left: 8px" @click="setEmpty">重置</a-button>
                  </a-col>
                </a-row>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="[48,0]" v-if="role.roleKey === 'admin' || role.roleKey === 'GUIDANCE_EXPERT'">
            <a-col :sm="24">
              <a-form-item
                label="数量统计"
                style="margin-bottom: 0px">
                <span style="color: #0084FE">组织数量：{{ tj.countUser }}</span>
                <!-- <a-divider type="vertical" />
                <span style="color: #FF9600">已审核数量：{{ tj.countShenghe }}</span> -->
                <a-divider type="vertical" />
                <span style="color: #FF9600">已填报数量：{{ tj.countTianbao }}</span>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card
      :bordered="false"
      style="margin-top: -24px;">
      <div slot="extra" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
        <a-select
          v-model="queryParam.unitInfoId"
          :allowClear="true"
          placeholder="请选择业务主管单位"
          style="width: 200px"
          @change="getList(true)"
        >
          <a-select-option v-for="item in unitList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
        <a-select
          v-model="queryParam.orderbyString"
          :allowClear="true"
          placeholder="请选择排序"
          style="width: 200px;margin-left:10px"
          @change="getList(true)"
        >
          <a-select-option :value="1">填报时间升序</a-select-option>
          <a-select-option :value="2">填报时间降序</a-select-option>
          <a-select-option :value="3">自测得分升序</a-select-option>
          <a-select-option :value="4">自测得分降序</a-select-option>
          <a-select-option :value="5">指导的分升序</a-select-option>
          <a-select-option :value="6">指导的分降序</a-select-option>
          <a-select-option :value="7">编码升序</a-select-option>
          <a-select-option :value="8">编码降序</a-select-option>
        </a-select>
      </div>
      <div v-else style="border-bottom: 1px solid #e8e8e8;"></div>
      <a-list :loading="tableLoading" :pagination="{showSizeChanger: true, current: this.current,pageSize: this.size, total: this.total, hideOnSinglePage: true, onChange: changePage, onShowSizeChange: changePage}">
        <a-list-item :key="item.id" v-for="item in data" @click="jumpDetail(item)">
          <div class="list-content">
            <div class="list-content-item">
              <div class="value title">{{ item.createUserName }}</div>
            </div>
            <div class="list-content-item">
              <div class="key">申请类别</div>
              <div class="value lb">{{ item.socialOrganizationType }}</div>
            </div>
            <div class="list-content-item">
              <div class="key">自评得分</div>
              <div class="value df">{{ +item.recordSelfScoreSum }}/{{ item.managementTotalPoint }}</div>
            </div>
            <!-- <div class="list-content-item" v-if="role.roleKey === 'admin' || role.roleKey === 'GUIDANCE_EXPERT'">
              <div class="key">回复指标数</div>
              <div class="value">{{ item.recordAnnotationCount }}/{{ item.recordCount-item.recordAnnotationCount }}</div>
            </div> -->
            <div class="list-content-item">
              <div class="key">申请级别</div>
              <div class="value">{{ item.declarationlevel }}</div>
            </div>
            <div class="list-content-item" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
              <div class="key">指导得分</div>
              <div class="value">{{ +item.recordScoreZhidaoSum || 0 }}</div>
            </div>
<!--            <div class="list-content-item" v-if="role.roleKey === 'admin' || role.roleKey === 'EXPERT'">-->
<!--              <div class="key">专家打分</div>-->
<!--              <div class="value">{{ +item.recordScoreSum || 0 }}</div>-->
<!--            </div>-->
            <div class="list-content-item" v-if="role.roleKey === 'admin' || $store.getters.isMzRole">
              <div class="key">专家打分</div>
              <div class="value">{{ +item.recordScoreSum || 0 }}</div>
            </div>
            <div class="list-content-item" v-else-if="role.roleKey === 'EXPERT'">
              <div class="key">专家打分</div>
              <div class="value">{{ +item.selfRecordScoreSum || 0 }}</div>
            </div>
            <div class="list-content-item">
              <div class="value jd" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
                <div class="key">填报进度</div>
                <a-progress strokeColor="#FEA538" :percent="(item.recordCount/item.managementCount) | setDecimals" status="normal" />
              </div>
              <div class="value jd" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
                <div class="key">指导进度</div>
                <a-progress strokeColor="#4674F6" :percent="(item.zhidaoRecordAnnotationCount/item.recordCount) | setDecimals" status="normal" />
              </div>
              <div class="value jd" v-if="role.roleKey === 'admin' || $store.getters.isMzRole">
                <div class="key">评审进度</div>
                <a-progress strokeColor="#4674F6" :percent="(item.recordAnnotationCount/item.recordCount) | setDecimals" status="normal" />
              </div>
              <div class="value jd" v-else-if="role.roleKey === 'EXPERT'">
                <div class="key">评审进度</div>
                <a-progress strokeColor="#4674F6" :percent="(item.selfRecordAnnotationCount/item.recordCount) | setDecimals" status="normal" />
              </div>
            </div>
            <div class="list-content-item" v-if="role.roleKey === 'admin' || $store.getters.isMzRole || role.roleKey === 'GUIDANCE_EXPERT'">
              <img src="@/assets/images/system/wcs.png" class="statusImg" v-if="item.status === 1"/>
              <img src="@/assets/images/system/wtg.png" class="statusImg" v-if="item.status === 2"/>
              <img src="@/assets/images/system/wtb.png" class="statusImg" v-if="item.status === 3 && item.recordCount === 0"/>
              <img src="@/assets/images/system/tbz.png" class="statusImg" v-if="item.status === 3 && item.recordCount > 0"/>
            </div>
            <div class="list-content-item btnBox" v-if="role.roleKey === 'admin'">
              <div class="btn btn1" @click.stop="deleteOrg(item)"><a-icon type="delete" />删除</div>
              <div class="btn btn2" @click.stop="getOrgDetail(item)"><a-icon type="audit" />审核</div>
            </div>
          </div>
          <!-- <div slot="actions">
            <a-dropdown>
              <a-menu slot="overlay">
                <a-menu-item><a >删除</a></a-menu-item>
                <a-menu-item><a @click="putOrg(item, 3)">初审通过</a></a-menu-item>
                <a-menu-item><a @click="putOrg(item, 2)">初审不通过</a></a-menu-item>
              </a-menu>
              <a @click.stop="() => {}"><a-icon type="more" /></a>
            </a-dropdown>
          </div> -->
        </a-list-item>
      </a-list>
    </a-card>
    <a-modal
      title="审核"
      :width="640"
      :visible="auditVisible"
      @cancel="() => auditVisible = false"
      :footer="null"
    >
      <a-spin :spinning="auditLoading">
        <div class="auditList">
          <div class="auditLeft">
            <div class="auditItem">
              <span class="key">组织名称:</span>{{ auditDetail.createUserName }}
            </div>
            <div class="auditItem">
              <span class="key">社会组织类型:</span>{{ auditDetail.socialOrganizationType }}
            </div>
            <div class="auditItem">
              <span class="key">申请级别:</span>{{ auditDetail.declarationLevel }}
            </div>
            <div class="auditItem">
              <span class="key">业务主管单位:</span>{{ auditDetail.unitName }}
            </div>
            <div class="auditItem">
              <span class="key">法定代表人:</span>{{ auditDetail.legalPerson }}
            </div>
            <div class="auditItem">
              <span class="key">法定代表人电话:</span>{{ auditDetail.phone }}
            </div>
            <div class="auditItem">
              <span class="key">申请时间:</span>{{ auditDetail.createTime }}
            </div>
          </div>
          <div class="auditRight">
            <div class="auditItem">
              <span class="key">社会组织章程：</span>
            </div>
            <div class="auditImg">
              <img :src="auditDetail.url" alt="" @click="preview(auditDetail.url)">
            </div>
          </div>
        </div>
        <div class="auditBox" v-if="auditDetail.status !== 3">
          <div class="auditBtn btn1" @click="putOrg(auditDetail, 3)"><a-icon type="file-done" />审核通过</div>
          <div class="auditBtn btn2" @click="putOrg(auditDetail, 2)"><a-icon type="exception" />审核不通过</div>
        </div>
      </a-spin>
    </a-modal>
    <a-modal
      width="50%"
      :visible="previewVisible"
      :footer="null"
      @cancel="()=>previewVisible = false">
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import bus from '@/utils/bus'
import { getSystemDetail, getOrganizationTypes, getDeclarationLevels, getOrgList, putOrg, getDeclarationInfo } from '@/api/system'
import { getUnitList } from '@/api/unit'
export default {
  name: 'DeclareSystemOrg',
  components: {
  },
  data () {
    this.formLayout = {
      labelAlign: 'left',
      labelCol: {
        span: 2
      },
      wrapperCol: {
        span: 22
      }
    }
    return {
      declarationSystemId: this.$route.query.declarationSystemId,
      detail: {},
      types: [],
      levels: [],
      unitList: [],
      // 查询参数
      queryParam: { socialOrganizationTypeId: -1, declarationLevelId: -1, rate: -1, status: -1 },
      current: 1,
      size: 10,
      total: 0,
      data: [],
      tj: {
        countTianbao: 0,
        countUser: 0,
        countShenghe: 0
      },
      auditVisible: false,
      tableLoading: false,
      auditLoading: false,
      auditDetail: {},
      previewVisible: false,
      previewImage: ''
    }
  },
  watch: {
    '$route.query.declarationSystemId': {
      handler (val) {
        if (val && +val !== +this.declarationSystemId) {
          document.querySelector('html').scrollTop = 0
          this.declarationSystemId = val
          this.detail = {}
          this.types = []
          this.levels = []
          this.unitList = []
          this.current = 1
          this.size = 10
          this.total = 0
          this.data = []
          this.queryParam = {
            socialOrganizationTypeId: -1,
            declarationLevelId: -1,
            rate: -1,
            status: -1
          }
          this.tj = {
            countTianbao: 0,
            countUser: 0,
            countShenghe: 0
          }
          this.getData()
        }
      },
      deep: true
      }
  },
  computed: {
    role () {
      return this.$store.getters.roles
    }
  },
  filters: {
    setDecimals (val) {
      return +((val * 100).toFixed(0))
    }
  },
  created () {
    this.getData()
  },
  mounted () {
    bus.$on('toRefreshData', (status) => {
      if (status === 'refreshOrgList') {
        this.getList()
      }
    })
  },
  methods: {
    getData () {
      this.getList()
      this.getDetail()
      this.getTypes()
      this.getLevels()
      this.getUnitList()
    },
    setEmpty () {
      this.queryParam = { socialOrganizationTypeId: -1, declarationLevelId: -1, rate: -1, status: -1 }
      this.getList(true)
    },
    changePage (page, pageSize) {
      this.current = page
      this.size = pageSize
      this.getList()
    },
    getList (isFirst) {
      this.tableLoading = true
      if (isFirst) {
        this.current = 1
      }
      const requestParameters = Object.assign({}, { current: this.current, size: this.size, declarationSystemId: this.declarationSystemId }, this.queryParam)
      if (requestParameters.socialOrganizationTypeId === -1) {
        delete requestParameters.socialOrganizationTypeId
      }
      if (requestParameters.declarationLevelId === -1) {
        delete requestParameters.declarationLevelId
      }
      if (requestParameters.rate === -1) {
        delete requestParameters.rate
      }
      if (requestParameters.status === -1) {
        delete requestParameters.status
      }
      getOrgList(requestParameters)
      .then(res => {
        this.tj = {
          countTianbao: res.countTianbao,
          countUser: res.countUser,
          countShenghe: res.countShenghe
        }
        this.data = res.resultPage.records
        this.total = res.resultPage.total
      }).finally(res => {
        this.tableLoading = false
      })
    },
    getDetail () {
      getSystemDetail({
        id: this.declarationSystemId
      })
      .then(res => {
        this.detail = res
      })
    },
    getTypes () {
      getOrganizationTypes({
        declarationSystemId: this.declarationSystemId
      })
      .then(res => {
        this.types = res
      })
    },
    getLevels () {
      getDeclarationLevels({
        declarationSystemId: this.declarationSystemId
      })
      .then(res => {
        this.levels = res
      })
    },
    getUnitList () {
      getUnitList()
          .then(res => {
            this.unitList = res
          })
    },
    putOrg (data, status) {
      putOrg({
        ...data,
        status
      })
      .then(res => {
        this.$message.success('审核成功')
        this.auditVisible = false
        this.getList()
      })
    },
    deleteOrg (data) {
      this.$confirm({
        title: '删除确认',
        content: '确认要删除该数据吗？并且不可恢复！',
        okType: 'danger',
        onOk: () => {
          putOrg({
            ...data,
            delFlag: 1
          })
          .then(res => {
            this.$message.success('删除成功')
            this.getList()
          })
        }
      })
    },
    getOrgDetail (data) {
      this.auditVisible = true
      this.auditLoading = true
      getDeclarationInfo({
        id: data.id
      })
      .then(res => {
        // 文件判断处理
        if (res.bucketName) {
          res.url = this.getFileUrl(res)
        } else {
          // 兼容老数据
          if (res.url && res.url.indexOf('https://pinggu.mkcom.cn/grade-evaluation-file/') == -1) {
            res.url = 'https://pinggu.mkcom.cn/grade-evaluation-file/' + res.url
          }
        }
        console.log('url==========', res.url);
        this.auditDetail = res
        this.auditDetail.unitName = data.unitName
        this.auditLoading = false
      })
    },
    getFileUrl(item) {
      if (!item.url) {
        return ''
      }

      let url = item.url 
      if (item.bucketName) {
        url = process.env.VUE_APP_OSS_API + url
      }
      return url
    },
    preview (url) {
      this.previewImage = url
      this.previewVisible = true
    },
    jumpDetail (info) {
      this.$router.push({
        name: 'DeclareSystemDetail',
        query: {
          declarationInfoId: info.id,
          socialOrganizationTypeId: info.socialOrganizationTypeId
          }
        })
    }
  }
}
</script>

<style lang="less" scoped>
.wrapper {
  background: #fff;

:deep(.ant-radio-button-wrapper ) {
  margin-right: 8px;
    &:first-child {
      border-radius: 0;
    }
    &:last-child {
      border-radius: 0;
    }
  }
}

.list-content {
  width: 100%;
  cursor: pointer;
  .flex-between();
  .list-content-item {
      text-align: center;
      .key {
        font-size: 14px;
        color: rgba(153, 153, 153, 0.85);
        margin-bottom: 16px;
      }
      .value{
        font-size: 18px;
        color: rgba(0, 0, 0, 0.85);
      }
      .title {
        width: 200px;
      }
      .lb {
        width: 170px;
      }
      .df {
        width: 100px;
      }
      .statusImg {
        height: 70px;
      }
      .jd {
        width: 300px;
        margin-bottom: 16px;
        .flex-center();
        .key {
          width: 100px;
          margin-right: 10px;
          margin-bottom: 0;
        }
        &:last-child {
          margin-bottom: 0;
        }
      }
      &.btnBox {
        .flex-center();
        .btn {
          margin-left: 16px;
          cursor: pointer;
          i {
            margin-right: 4px;
          }
        }
        .btn1 {
          color: #ff4d4f;
        }
        .btn2 {
          color: #1890ff;
        }
      }
  }
}
@media (max-width: 1600px) {
  .list-content {
    .list-content-item {
        .title {
          width: 120px;
        }
        .jd {
          width: 200px;
        }
    }
  }
}
.auditList {
  padding: 0 16px;
  overflow: hidden;
  .auditLeft {
    width: 50%;
    float: left;
  }
  .auditRight {
    width: 50%;
    float: right;
  }
  .auditItem {
    margin-bottom: 5px;
    .key {
      font-weight: bold;
      margin-right: 8px;
    }
  }
  .auditImg {
    width: 100%;
    img {
      display: block;
      width: 100%;
      cursor: pointer;
    }
  }
}
.auditBox {
  width: 100%;
  padding: 16px 64px;
  .flex-between();
  .auditBtn {
    font-size: 18px;
    font-weight: bold;
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
    &.btn1 {
      border:1px solid #1890ff;
      background-color: rgba(24, 144, 255, 0.4);
      i {
        color: #1890ff;
        margin-right: 8px;
      }
    }
    &.btn2 {
      border:1px solid #ff4d4f;
      background-color: rgba(255, 77, 79, 0.4);
      i {
        color: #ff4d4f;
        margin-right: 8px;
      }
    }
  }
}
</style>
